<template>
  <div class="userPage">
    <el-container>
      <splitpanel title="组织架构" icon="company" :request="request" :department="department" :defaultProps="defaultProps" @handleNodeClick="handleNodeClick"></splitpanel>
      <el-main class="el-mainBox">
        <div class="rightLayout">
          <formbox :SysEmployeeForm="SysEmployeeForm" @deleteSysEmployee="deleteSysEmployee" @editClick="editClick" @resetSysEmployee="resetSysEmployee" @openSysEmployee="openSysEmployee" @querySysEmployee="querySysEmployee"></formbox>
          <div style="height: 50px;padding-left: 10px;border-top: 1px solid #eeeeee">
            <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadsysEmployee"></pagination>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style>
  .userPage {
    min-height: calc(100vh - 84px);
    display: flex;
    flex-direction: row;
  }
  .leftLayout {
    display: flex;
    flex-direction: row;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .rightLayout {
    width: 100%;
    height: 100%;
  }
  .el-aside {
    color: #333;
  }

  .user-order {
    padding: 20px 20px 10px 20px;
    box-sizing: border-box;
  }

  .el-menu {
    border: none !important;
  }
  .el-mainBox{
    padding: 0 !important;
  }

  .el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
  }
</style>

<script>
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import formbox from './components/formbox'
  import splitpanel from '@/components/SplitPanel'
  import Pagination from '@/components/Pagination';
  import {mapGetters} from 'vuex'
  import {list, del,update} from '@/api/sysEmployee'
  import {list as treeList} from '@/api/sysOffice'
  import { EventBus } from '@/api/eventBus'
  import utils from '../../utils/utils.js'
  export default {
    name:'sysEmployee-list',
    directives: { permission },
    data() {
      return {
        isCollapse: false,
        queryName: '',
        queryNumber: '',
        keyword:{
          name:'',
          number:''
        },
        pageNum: 1,// 当前页
        pageSize: 20, // 每页显示条目个数
        total: 0,// 总条目数
        SysEmployeeForm: [],
        officeId: '',
        department: [],
        defaultProps: {
          children: 'childrens',
          label: 'name'
        },
        sysEmployeeOpenForm: {
          id: '',
          status: ''
        },
        request:'sysOffice'
      };
    },
    components: {
      formbox,splitpanel,Pagination
    },
    computed: {
      ...mapGetters([
        'sidebar',
      ]),
    },
    created() {
      var _this = this
      this.loadsysEmployee()
      this.treeList()
      EventBus.$on('sysEmployee-add', res => { // 监听新增完毕
        // 更新列表数组
        _this.SysEmployeeForm.splice(0, 0,res)
      })
      EventBus.$on('sysEmployee-edit', res => { // 监听新增完毕
        // 更新列表数组
        for (var i=0;i<_this.SysEmployeeForm.length;i++){
          if (_this.SysEmployeeForm[i].id == res.id){
            _this.SysEmployeeForm[i] = res
          }
        }
      })
    },
    methods: {
      querySysEmployee(data) {
        var _this = this
        _this.keyword.name = data.name;
        _this.keyword.number = data.number;
        _this.pageNum = 1;
        _this.loadsysEmployee()
      },
      resetSysEmployee(){
        this.keyword.name = '';
        this.keyword.number = '';
        this.pageNum = 1;
        this.loadsysEmployee()
      },
      editClick (data) {
        console.log(data);
        this.$router.push({
          path: '/sysEmployee/edit',
          query: {id: data.id}
        });
      },
      leftBotton: function () {
        this.isCollapse = !this.isCollapse
      },
      handleNodeClick(data) {
        console.log(data);
        var _this = this
        _this.pageNum = 1;
        _this.pageSize = 10;
        _this.total = 0;
        _this.officeId = data.id;
        _this.loadsysEmployee()
      },
      loadsysEmployee() {
        var _this = this
        let params = new URLSearchParams();
        params.append('pageNum', _this.pageNum);
        params.append('pageSize', _this.pageSize);
        params.append('empNo', _this.keyword.number);
        params.append('name', _this.keyword.name);
        params.append('officeId', _this.officeId);
        list(params).then(response => {
          console.log(response)
          response.data.data.map(item => { return item.loading = false })
          _this.SysEmployeeForm = response.data.data
          _this.total = response.data.total
        }).catch(error => {
          console.log('error!!')
        });
      },
      deleteSysEmployee(data) {
        console.log(data);
        var _this = this;
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(data).then(response => {
            console.log(response)
            _this.SysEmployeeForm.forEach(function (item,index) {
              if (item.id == data){
                _this.SysEmployeeForm.splice(index,1)
              }
            });
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
          }).catch(error => {
            console.log('error!!')
          });
        }).catch(() => {

        })
      },
      treeList() {
        var _this = this
        treeList().then(response => {
          console.log(response)
          _this.department = response.data
        }).catch(error => {
         console.log('error!!')
        });
      },
      openSysEmployee(row) {
        var _this = this
        console.log(row);
        this.sysEmployeeOpenForm.id = row.id;
        if (row.status == 0) {
          this.sysEmployeeOpenForm.status = 1
        } else if (row.status == 1) {
          this.sysEmployeeOpenForm.status = 0
        }
        update(_this.sysEmployeeOpenForm).then(response => {
          console.log(response)
          _this.SysEmployeeForm.forEach(function (item) {
            if (item.id == row.id){
              console.log('22222')
              item.status = response.data.status
            }
          })
          _this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
          row.loading = false
        }).catch(error => {
          row.loading = false
          console.log('error!!')
        });
      },
    }
  }
</script>
